<template>
	<view class="apply">
		<image :src="$IMG_URL('/static/newVersion/applybg.png')" mode="" class="bg"></image>
		<view class="card">
			<view class="required-box mb">
				<view class="left_title">
					<text class="required-tag">*</text>
					<text class="size">您的姓名</text>
				</view>
				<u-input v-model="query.name" type="text" input-align="right" placeholder="请填写您的姓名" :border="false" />
			</view>
			<view class="required-box mb">
				<view class="left_title">
					<text class="required-tag">*</text>
					<text class="size">合伙意向城市</text>
				</view>
				<u-input v-model="query.city" type="text" input-align="right" placeholder="请选择合伙意向城市" :border="false" />
				<!-- <image :src="$IMG_URL('/static/home/indicate.png')" mode="aspectFill" class="indicate"></image> -->
			</view>
			<view class="required-box mb">
				<view class="left_title">
					<text class="required-tag">*</text>
					<text class="size">手机号码</text>
				</view>
				<u-input v-model="query.mobile" type="number" maxlength="11" input-align="right" placeholder="请填写手机号码"
					:border="false" />
			</view>
			<view class="required-box mb">
				<view class="left_title">
					<text class="required-tag">*</text>
					<text class="size">合伙投入预算</text>
				</view>
				<u-input v-model="query.budget" type="text" input-align="right" placeholder="请选择合伙投入预算" :disabled="true"
					:border="false" @click="joinShow = true" />
				<image :src="$IMG_URL('/static/home/indicate.png')" mode="aspectFill" class="indicate"></image>
			</view>
			<view class="required-box ">
				<view class="left_title">
					<text class="size">推荐人</text>
				</view>
				<u-input v-model="query.referrer" type="text" input-align="right" placeholder="请填写推荐人（选填）"
					:border="false" />
			</view>
		</view>
		<view class="foot">
			<view class="Richbtn" @click="apply">
				提交申请
			</view>
		</view>
		<!-- 	<coupon :couponShow="cityShow" :title="'选择加盟意向城市'" @close="CityClose" @sure="Citysure">
			<view class="row-box">
				<scroll-view scroll-y="true" class="scroll-left">
					<view class="left_comlum">
						<view v-for="(item,index) in cityList" :key="index" class="left-Item"
							:class="activeIndex == index ?'color2':'color1'" @click="changeActive(item, index)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
				<scroll-view scroll-y="true" class="scroll-right">
					<view class="right_comlumn">
						<view v-for="(childItem,childIndex) in cityList[activeIndex].child" :key="childIndex"
							:class="childActiveIndex == childIndex ?'right-Item-Active':'right-Item'"
							@click="changeChildIndex(childItem,childIndex)"
							>
							{{childItem}}
						</view>
					</view>
				</scroll-view>
			</view>
		</coupon> -->
		<coupon :couponShow="joinShow" :title="'选择加盟预算'" @close="joinClose" @sure="joinsure">
			<view class="join-comlum-box">
				<view v-for="(item,index) in joinList" :key="index"
					:class="joinIndex == index ?'joinActiveIndex':'joinItem'" @click="changeJoinIndex(item,index)">
					{{item.budget}}
				</view>
			</view>
		</coupon>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import coupon from '@/components/popup.vue'
	import {
		budget,
		league
	} from '@/api/apply.js'
	export default {
		components: {
			coupon
		},
		data() {
			return {
				query: {
					name: '',
					city: '',
					mobile: '',
					budget: '',
					referrer: ''
				},
				activeIndex: 0,
				childActiveIndex: 0,
				joinShow: false,
				joinList: [
					'30-40万',
					'40-50万',
					'50-60万',
					'60万以上'
				],
				joinIndex: 0
			}
		},
		onLoad() {
			this.getBudget()
		},
		methods: {
			getleague() {
				
			},
			getBudget() {
				budget().then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {} {
						this.joinList = res.data
					}
				})
			},
			apply() {
				league(this.query).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.$refs.uToast.show({
						    title: res.msg,
						    type: 'success',
						    callback: () => { // 注意这里只是声明了一个箭头函数，并没有执行它
						       uni.redirectTo({
						       	url: 'submit'
						       })
						    }
						});
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
						})
					}
				})
				
			},
			// 城市
			CityClose(message) {
				this.cityShow = message
			},
			Citysure() {
				this.cityShow = false
			},
			changeActive(item, index) {
				this.activeIndex = index
				this.childActiveIndex = 0
			},
			changeChildIndex(item, index) {
				this.childActiveIndex = index
			},

			// 加盟费用
			joinClose(message) {
				this.joinShow = message
			},
			joinsure() {
				this.query.budget = this.joinList[this.joinIndex].budget
				this.joinShow = false
			},
			changeJoinIndex(item, index) {
				this.joinIndex = index
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #e9e9e9;
	}

	.apply {
		display: flex;
		flex-direction: column;
		align-items: center;

		.bg {
			width: 750rpx;
			height: 274rpx;
		}

		.card {
			width: 702rpx;
			background: #ffffff;
			border-radius: 16rpx;
			margin-top: -32rpx;
			z-index: 99;
			padding: 40rpx;
			display: flex;
			flex-direction: column;

			.mb {
				margin-bottom: 48rpx;
			}

			.required-box {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;

				.left_title {
					flex: 1;

					.required-tag {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #f37364;
					}

					.size {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #333333;
					}
				}

				.indicate {
					width: 10rpx;
					height: 16rpx;
					margin-left: 8rpx;
				}
			}
		}

		.foot {
			width: 750rpx;
			height: 160rpx;
			background: #ffffff;
			box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166, 179, 194, 0.30);
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			padding: 16rpx 20rpx 0;
			position: fixed;
			bottom: 0;

			.Richbtn {
				width: 710rpx;
				height: 88rpx;
				background: #73F0EA;
				border-radius: 16rpx;
				font-size: 34rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.row-box {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 100%;

			.scroll-left {
				width: 200rpx;
				background: #f8f8f8;
				height: 100%;

				.left_comlum {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;

					.left-Item {
						width: 100%;
						padding: 20rpx 0;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;

						display: flex;
						align-items: center;
						justify-content: center;
					}

					.color1 {
						color: #666666;
					}

					.color2 {
						color: #73F0EA;
					}
				}
			}

			.scroll-right {
				flex: 1;
				height: 100%;
				background-color: #ffffff;

				.right_comlumn {
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;

					.right-Item {
						width: 542rpx;
						height: 80rpx;
						background: #ffffff;
						border-radius: 16rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						color: #666666;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 8rpx;
					}

					.right-Item-Active {
						background-color: rgba(129, 202, 197, 0.1);
						width: 542rpx;
						height: 80rpx;
						border-radius: 16rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						color: #73F0EA;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 8rpx;
					}
				}
			}
		}

		.join-comlum-box {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.joinItem {
				width: 702rpx;
				height: 80rpx;
				background: #ffffff;
				border-radius: 16rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: center;
				color: #666666;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.joinActiveIndex {
				width: 702rpx;
				height: 80rpx;
				background-color: rgba(129, 202, 197, 0.1);
				border-radius: 16rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: center;
				color: #73F0EA;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>